<template>
  <div>
    <ksh-layout>
      <template #left>
        <echart-main>
          <template #title> 产业统计 </template>
          <template #echart>
            <div class="nyXq">
              <div class="nyXqLi" v-for="item in chooseLi">
                <div class="nyxqIco">
                  <img :src="item.ico" alt="" />
                </div>
                <div class="nyxqTxt">
                  <p>{{ item.name }}</p>
                  <p>
                    <span :class="item.value.color">{{ item.value.val }}</span
                    >{{ item.value.unit }}
                  </p>
                </div>
              </div>
            </div>
          </template>
        </echart-main>
        <echart-main class="box1">
          <template #title> 帮扶统计 </template>
          <template #echart>
            <div>
              <div class="box">
                <echart :options="option1" />
              </div>
              <p>各年度村总产业</p>
              <div class="box">
                <echart :options="option2" />
              </div>
            </div>
          </template>
        </echart-main>
        <echart-main class="box2">
          <template #title> 产业统计 </template>
          <template #echart>
            <echart :options="option3" />
          </template>
        </echart-main>
      </template>
      <template #right>
        <echart-main>
          <template #title> 新增产业统计 </template>
          <template #echart>
            <ul class="tongji">
              <li v-for="item in chanye">
                <div>{{ item.name }}</div>
                <div>
                  <span class="val">{{ item.value }}</span
                  >{{ item.unit }}
                </div>
              </li>
            </ul>
          </template>
        </echart-main>
        <echart-main>
          <template #title> 新增基建统计 </template>
          <template #echart>
            <ul class="tongji">
              <li v-for="item in jijian">
                <div>{{ item.name }}</div>
                <div>
                  <span class="val">{{ item.value }}</span
                  >{{ item.unit }}
                </div>
              </li>
            </ul>
          </template>
        </echart-main>
        <echart-main class="box3" >
          <template #title> 特殊人群数量变化 </template>
          <template #echart>
            <echart :options="option4" />
          </template>
        </echart-main>
        <echart-main class="box3">
          <template #title> 三类监测人群变化 </template>
          <template #echart>
            <echart :options="option5" />
          </template>
        </echart-main>
      </template>
    </ksh-layout>
  </div>
</template>

<script>
import KshLayout from "components/content/layoutMain/KshLayout.vue";
import EchartMain from "components/content/echartMain/EchartMain.vue";
import Echart from "components/common/echart/Echart.vue";

import { echart10, echart11, echart12, echart14 } from "./option";

export default {
  components: { Echart, KshLayout, EchartMain },
  data() {
    return {
      chooseLi: [
        {
          field: "zongren",
          ico: require("assets/img/sy/gmIco5.png"),
          name: "农民总人数",
          value: {
            val: 1570,
            unit: "人",
            color: "color1",
          },
        },
        {
          field: "zongren",
          ico: require("assets/img/sy/gmIco6.png"),
          name: "农民总户数",
          value: {
            val: 597,
            unit: "户",
            color: "color2",
          },
        },
        {
          field: "zongren",
          ico: require("assets/img/sy/gmIco8.png"),
          name: "低保户",
          value: {
            val: 113,
            unit: "户",
            color: "color3",
          },
        },
        {
          field: "zongren",
          ico: require("assets/img/sy/gmIco9.png"),
          name: "五保户",
          value: {
            val: 6,
            unit: "户",
            color: "color4",
          },
        },
      ],
      option1: null,
      option2: null,
      option3: null,
      option4: null,
      option5: null,
      chanye: [
        { name: "种植", value: "350", unit: "户" },
        { name: "养殖", value: "96", unit: "户" },
        { name: "企业", value: "1", unit: "家" },
        { name: "合作社", value: "5", unit: "个" },
      ],
      jijian: [
        { name: "道路硬化", value: "17.8", unit: "公里" },
        { name: "活动广场", value: "6", unit: "个" },
        { name: "路灯", value: "240", unit: "个" },
        { name: "公共卫生间", value: "2", unit: "个" },
      ],
    };
  },

  mounted() {},
  created() {
    this.option1 = echart10([
      { value: 35, name: "产业帮扶" },
      { value: 45, name: "医疗帮扶" },
      { value: 20, name: "就业帮扶" }
    ]);
    this.option2 = echart11({
      x: ["2019", "2020", "2021"],
      y: [40, 50, 60]
    });
    this.option3 = echart12([
      { value: 0, name: "种植" },
      { value: 0, name: "养殖" },
      { value: 0, name: "企业" },
      { value: 3, name: "合作社" }
    ]);
    this.option4 = echart11({
      x: [2019, 2020, 2021],
      y: [72, 56, 39]
    });
    this.option5 = echart14({
      x: [2019, 2020, 2021],
      y: [
        {
          name: "监测人群",
          type: "line",
          data: [72, 56, 39],
        }
      ]
    });
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.nyXq {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  color: #fff;
  justify-content: center;
  padding: 1.25rem;
  .nyXqLi {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: shuzi;
    width: 50%;
    .nyxqIco {
      width: 2.8125rem;
      img {
        width: 100%;
      }
    }
    .nyxqTxt {
      p {
        white-space: nowrap;
        margin: 0 0.3125rem;
        font-size: 0.875rem;
        span {
          font-size: 1.625rem;
          margin-right: 0.3125rem;
        }
      }
    }
    .color1 {
      color: #48ece7;
    }
    .color2 {
      color: #ffd452;
    }
    .color3 {
      color: #47a2ff;
    }
    .color4 {
      color: #47ff88;
    }
    .color5 {
      color: #ff7b47;
    }
  }
}
.box1 {
  p {
    color: #fff;
    padding: 0 1.25rem;
  }
  .box {
    width: 100%;
    height: 10.625rem;
  }
}
.box2 {
  width: 100%;
  height: 12.5rem;
}
.box3 {
  height: 17.5rem;
}
.tongji {
  display: flex;
  padding: 0.625rem 0;
  li {
    font-size: 1rem;
    width: 25%;
    text-align: center;
    div {
      margin: 0.3125rem 0;
      .val {
        color: #33f1f9;
        font-family: "shuzi";
        font-size: 1.5rem;
      }
    }
  }
}
</style>